<template>
    <el-dialog v-model="visible" @close="hideModal" :width="width + 'mm'" style="min-height: 100px;padding:0">
        <div id="preview_content_design"></div>
        <!-- </el-popover> -->
        <template #header>
            <div class="headerContent">
                <div style="margin-right: 20px" class="headerTitel">打印预览</div>
                <el-button :loading="waitShowPrinter" type="primary" icon="el-icon-printer"
                    @click="print">打印</el-button>
                <el-button type="primary" icon="el-icon-printer" @click="toPdf">pdf</el-button>
            </div>
            <!-- <el-button :loading="waitShowPrinter" type="primary" icon="printer" @click.stop="print">打印</el-button>
            <el-button type="primary" icon="printer" @click.stop="toPdf">pdf</el-button> -->
        </template>
        <template slot="footer">
            <el-button key="close" type="info" @click="hideModal">
                关闭
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";
let visible = ref(false)
let spinning = ref(true)
let waitShowPrinter = ref(false)
// 纸张宽 mm
let width = ref(0)
// 模板
let hiprintTemplate = ref({})
// 数据
let printData = ref({})


function hideModal() {
    visible.value = false
}
function show(hiprintTemplatePram, printDataPram, widthPram = '210') {
    console.log("show");
    visible.value = true
    spinning.value = true
    width.value = hiprintTemplatePram.editingPanel ? hiprintTemplatePram.editingPanel.width : widthPram;
    hiprintTemplate.value = hiprintTemplatePram
    printData.value = printDataPram
    setTimeout(() => {
        // eslint-disable-next-line no-undef
        $('#preview_content_design').html(hiprintTemplatePram.getHtml(printDataPram))
        spinning.value = false
    }, 500)
}
function print() {
    waitShowPrinter.value = true
    hiprintTemplate.value.print(printData.value, {}, {
        callback: () => {
            console.log('callback')
            waitShowPrinter.value = false
        }
    })
}
function toPdf() {
    hiprintTemplate.value.toPdf(printData.value, '打印预览');
}
defineExpose({ show })
// export default {
//     name: "printPreview",
//     props: {},
//     data() {
//         return {
//             visible: false,
//             spinning: true,
//             waitShowPrinter: false,
//             // 纸张宽 mm
//             width: 0,
//             // 模板
//             hiprintTemplate: {},
//             // 数据
//             printData: {}
//         }
//     },
//     computed: {},
//     watch: {},
//     created() {
//     },
//     mounted() {
//     },
//     methods: {
//         hideModal() {
//             this.visible = false
//         },
//         show(hiprintTemplate, printData, width = '210') {
//             console.log("show");
//             this.visible = true
//             this.spinning = true
//             this.width = hiprintTemplate.editingPanel ? hiprintTemplate.editingPanel.width : width;
//             this.hiprintTemplate = hiprintTemplate
//             this.printData = printData
//             setTimeout(() => {
//                 // eslint-disable-next-line no-undef
//                 $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
//                 this.spinning = false
//             }, 500)
//         },
//         print() {
//             this.waitShowPrinter = true
//             this.hiprintTemplate.print(this.printData, {}, {
//                 callback: () => {
//                     console.log('callback')
//                     this.waitShowPrinter = false
//                 }
//             })
//         },
//         toPdf() {
//             this.hiprintTemplate.toPdf({}, '打印预览');
//         },
//     }
// }

</script>
<style lang="less" scoped>
#preview_content_design{
    border-top:1px solid #e8e8e8;
}
.headerContent {
    display: flex;
    align-items: center;
    padding: 10px 0 0 10px;
    // background-color: antiquewhite;
    .headerTitel {
        font-size: 20px;
        letter-spacing: 2px;
    }
}
::deep(.ant-modal-body) {
    padding: 0px;
}

::deep(.ant-modal-content) {
    margin-bottom: 24px;
}
</style>